"use client";

import { useState, useEffect } from 'react';
import { useSearchParams } from 'next/navigation';
import styles from './page.module.scss';

// 页面配置 - 按照新的布局顺序排列
const pages = [
  // 第一排：05、09、10
  { id: '05', title: '页面05', url: '/cg06/05', width: 960, height: 480, row: 1 },
  { id: '09', title: '页面09', url: '/cg06/09', width: 1280, height: 640, row: 1 },
  { id: '10', title: '页面10', url: '/cg06/10', width: 640, height: 320, row: 1 },
  // 第二排：02、07、08、11
  { id: '02', title: '页面02', url: '/cg06/02', width: 1280, height: 800, row: 2 },
  { id: '07', title: '页面07', url: '/cg06/07', width: 2240, height: 1280, row: 2 },
  { id: '08', title: '页面08', url: '/cg06/08', width: 1280, height: 800, row: 2 },
  { id: '11', title: '页面11', url: '/cg06/11', width: 1280, height: 640, row: 2 },
];

export default function CG06MainPage() {
  const searchParams = useSearchParams();
  const [loadingStates, setLoadingStates] = useState<Record<string, boolean>>(
    pages.reduce((acc, page) => ({ ...acc, [page.id]: true }), {})
  );

  // 构建带有查询参数的URL
  const buildUrlWithParams = (baseUrl: string) => {
    const urlParams = new URLSearchParams();
    
    // 将当前页面的所有查询参数添加到URL中
    searchParams.forEach((value, key) => {
      urlParams.append(key, value);
    });
      
    baseUrl = window.location.origin + baseUrl + '.html';
    
    const queryString = urlParams.toString();
    return queryString ? `${baseUrl}?${queryString}` : baseUrl;
  };

  const handleIframeLoad = (pageId: string) => {
    setLoadingStates(prev => ({ ...prev, [pageId]: false }));
  };

  const handleIframeError = (pageId: string) => {
    setLoadingStates(prev => ({ ...prev, [pageId]: false }));
  };

  // 当URL参数变化时，重新加载所有iframe
  useEffect(() => {
    // 重置所有加载状态
    setLoadingStates(
      pages.reduce((acc, page) => ({ ...acc, [page.id]: true }), {})
    );
  }, [searchParams]);

  return (
    <div className={styles.container}>
      <div className={styles.gridLayout} style={{ transform: 'scale(0.4)' }}>
        {pages.map((page) => {
          const urlWithParams = buildUrlWithParams(page.url);
          
          return (
            <div 
              key={page.id} 
              className={styles.pageCard} 
              style={{ 
                width: `${page.width}px`, 
                height: `${page.height}px`,
                gridRow: page.row
              }}
            >
              {loadingStates[page.id] && (
                <div className={styles.loading}>
                  <div className={styles.spinner}></div>
                  <span>加载中...</span>
                </div>
              )}
              
              <iframe
                src={urlWithParams}
                className={styles.iframe}
                title={page.title}
                onLoad={() => handleIframeLoad(page.id)}
                onError={() => handleIframeError(page.id)}
                sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
                loading="lazy"
                style={{
                  width: '100%',
                  height: '100%',
                  border: 'none',
                  background: 'transparent'
                }}
                key={`${page.id}-${searchParams.toString()}`}
              />
            </div>
          );
        })}
      </div>
    </div>
  );
}
